<page-header></page-header>

<div class="row">
  <div class="col-sm-12">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Form Inline</mat-card-title>
      </mat-card-header>

      <mat-card-content>
        <form>
          <mat-form-field class="m-r-8" appearance="outline">
            <mat-label>Username</mat-label>
            <input matInput [(ngModel)]="q.username" name="username">
          </mat-form-field>

          <mat-form-field class="m-r-8" appearance="outline">
            <mat-label>Email</mat-label>
            <input matInput [(ngModel)]="q.email" name="email">
          </mat-form-field>

          <mat-form-field class="m-r-8" appearance="outline">
            <mat-label>Gender</mat-label>
            <mat-select [(ngModel)]="q.gender" name="gender">
              <mat-option>-- None --</mat-option>
              <mat-option value="1">male</mat-option>
              <mat-option value="2">female</mat-option>
            </mat-select>
          </mat-form-field>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
  <div class="col-sm-4">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Form Horizontal</mat-card-title>
      </mat-card-header>

      <mat-card-content>
        <form [formGroup]="reactiveForm1" class="form-field-full">
          <mat-form-field>
            <mat-label>Username</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="username" required>
            <mat-error *ngIf="reactiveForm1.get('username')?.invalid">
              {{'validations.required' | translate}}
            </mat-error>
          </mat-form-field>

          <mat-form-field>
            <mat-label>Gender</mat-label>
            <mat-select required formControlName="gender" required>
              <mat-option>-- None --</mat-option>
              <mat-option value="1">male</mat-option>
              <mat-option value="2">female</mat-option>
            </mat-select>
            <mat-error *ngIf="reactiveForm1.get('gender')?.invalid">
              {{'validations.required' | translate}}
            </mat-error>
          </mat-form-field>

          <mat-form-field>
            <mat-label>Mobile</mat-label>
            <input matInput placeholder="Simple placeholder" type="number" formControlName="mobile"
                   required>
            <mat-icon matSuffix>smartphone</mat-icon>
            <mat-error *ngIf="reactiveForm1.get('mobile')?.invalid">
              {{'validations.required' | translate}}
            </mat-error>
          </mat-form-field>

          <mat-form-field>
            <mat-label>Email</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="email" required>
            <mat-error *ngIf="reactiveForm1.get('email')?.invalid">
              {{getErrorMessage(reactiveForm1) | translate}}
            </mat-error>
          </mat-form-field>

          <mat-form-field>
            <mat-label>City</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="city">
          </mat-form-field>

          <mat-form-field>
            <mat-label>Address</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="address">
          </mat-form-field>

          <mat-form-field>
            <mat-label>Company</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="company">
          </mat-form-field>

          <mat-form-field>
            <mat-label>Tele</mat-label>
            <input matInput placeholder="Simple placeholder" type="number" formControlName="tele">
            <mat-icon matSuffix>phone</mat-icon>
          </mat-form-field>

          <mat-form-field>
            <mat-label>Website</mat-label>
            <input matInput placeholder="Simple placeholder" formControlName="website">
          </mat-form-field>

          <mat-form-field>
            <input matInput [matDatepicker]="picker" placeholder="Choose a date"
                   formControlName="date">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>

          <div class="m-t-8 d-flex justify-content-end">
            <button mat-button class="m-x-8" type="button">Cancel</button>
            <button mat-raised-button color="primary">Save</button>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
  <div class="col-sm-8">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Form Horizontal</mat-card-title>
      </mat-card-header>

      <mat-card-content>
        <form [formGroup]="reactiveForm2" class="form-field-full">

          <div class="row">
            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Username</mat-label>
                <input matInput placeholder="Simple placeholder" formControlName="username"
                       required>
                <mat-error *ngIf="reactiveForm2.get('username')?.invalid">
                  {{'validations.required' | translate}}
                </mat-error>
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Gender</mat-label>
                <mat-select required formControlName="gender" required>
                  <mat-option>-- None --</mat-option>
                  <mat-option value="1">male</mat-option>
                  <mat-option value="2">female</mat-option>
                </mat-select>
                <mat-error *ngIf="reactiveForm2.get('gender')?.invalid">
                  {{'validations.required' | translate}}
                </mat-error>
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Mobile</mat-label>
                <input matInput placeholder="Simple placeholder" type="number"
                       formControlName="mobile" required>
                <mat-icon matSuffix>smartphone</mat-icon>
                <mat-error *ngIf="reactiveForm2.get('mobile')?.invalid">
                  {{'validations.required' | translate}}
                </mat-error>
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Email</mat-label>
                <input matInput placeholder="Simple placeholder" formControlName="email" required>
                <mat-error *ngIf="reactiveForm2.get('email')?.invalid">
                  {{getErrorMessage(reactiveForm2) | translate}}
                </mat-error>
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>City</mat-label>
                <input matInput placeholder="Simple placeholder" formControlName="city">
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Address</mat-label>
                <input matInput placeholder="Simple placeholder" formControlName="address">
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Company</mat-label>
                <input matInput placeholder="Simple placeholder" formControlName="company">
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Tele</mat-label>
                <input matInput placeholder="Simple placeholder" type="number"
                       formControlName="tele">
                <mat-icon matSuffix>phone</mat-icon>
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <mat-label>Website</mat-label>
                <input matInput placeholder="Simple placeholder" formControlName="website">
              </mat-form-field>
            </div>

            <div class="col-sm-6">
              <mat-form-field>
                <input matInput [matDatepicker]="picker2" placeholder="Choose a date"
                       formControlName="date">
                <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                <mat-datepicker #picker2></mat-datepicker>
              </mat-form-field>
            </div>
          </div>

          <div class="m-t-8">
            <button mat-raised-button color="primary">Save</button>
            <button mat-button class="m-x-8" type="button">Cancel</button>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
</div>
